import React, { useEffect, useState } from 'react'
import axios from 'axios';
import randomcolor from 'randomcolor'
export default function DuanziCom() {
  //声明段子数据的状态
  let [duanzi, setDuanzi] = useState([]);
  //useEffect 模拟 componentDidMount
  useEffect(() => {
    //发送请求获取段子数据
    axios.get('http://api.xiaohigh.com/duanzi').then(v => {
      // console.log(v.data);
      //更新状态
      setDuanzi(v.data);
    });
  }, [])

  return (
    <div>
      <h2>段子列表</h2>
      <hr />
      <ul style={{listStyle: 'none'}}>
        {
          duanzi.map(item => {
            return <li style={{marginBottom: 20, background: randomcolor({ luminosity: 'light' }), padding: 20}} key={item.id}>{item.text}</li>
          })
        }
      </ul>
    </div>
  )
}
